<template>
  <div class="m-container">
    <h2>
      任务：
      <el-select v-model="taskId" placeholder="请选择任务" @change="getCadres">
        <el-option v-for="item in tasks" :key="item.id" :label="item.name" :value="item.id"></el-option>
      </el-select>
      <el-button type="success" icon="el-icon-refresh" plain style="margin-left:10px;" @click="getCadres">刷新</el-button>
    </h2>
    <el-divider content-position="right">
      <el-button type="primary" icon="el-icon-check" plain @click="submit">提交</el-button>
    </el-divider>
      <el-table :data="cadres" height="85%" border style="width: 100%" v-loading="loading">
        <el-table-column prop="dept" label="部门" width="180"></el-table-column>
        <el-table-column prop="name" label="姓名" width="100"></el-table-column>
        <el-table-column prop="sex" label="性别" width="100"></el-table-column>
        <el-table-column prop="age" label="年龄" width="100"></el-table-column>
        <el-table-column label="备注">
          <template #default="scope">
            <el-button @click.native.prevent="addNote(scope.row)" type="text" size="small">
              {{scope.row.note}}
            </el-button>
          </template>
        </el-table-column>
        <el-table-column width="280">
          <template #header>
            绩效工资：{{meritSum}}
          </template>
          <template #default="scope">
            <h3 v-show="!getEditState(scope.row)">{{scope.row.meritPay}}</h3>
            <p v-show="getEditState(scope.row)"><el-input v-model="scope.row.meritPay" type="number"></el-input></p>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180">
          <template #default="scope">
            <el-button @click.native.prevent="editRow(scope.row)" type="text" size="small">
              {{getEditState(scope.row)?"确定":"编辑"}}
            </el-button>
          </template>
        </el-table-column>
      </el-table>
  </div>
  <el-dialog title="备注说明" v-model="dlgNote" width="30%">
    <el-input type="textarea" maxlength="30" show-word-limit v-model="currentRow.note"></el-input>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dlgNote = false">取 消</el-button>
        <el-button type="primary" @click="dlgNote = false">确 定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts">
import {defineComponent} from 'vue'
import {getCurrentTasks, getCadreTasks, saveCadreMerits} from '@/api/salary'
import _ from 'lodash'
import { ElMessage,ElMessageBox } from 'element-plus'
export default defineComponent({
  data() {
    return {
      tasks: [],
      taskId: '',
      cadres: [],
      loading: false,
      dlgNote: false,
      currentRow: null
    }
  },
  created() {
    getCurrentTasks().then(res => {
      this.tasks = res.data
      console.log(this.tasks)
    })
  },
  computed: {
    // 计算总和
    meritSum() {
      let sum = 0;
      for(let s of this.cadres) {
        sum += Number((s as any).meritPay)
      }
      return _.round(sum, 2)
    }
  },
  methods: {
    // 获取干部任务列表
    getCadres() {
      let td = this.taskId as any
      console.log(td)
      if(!_.isInteger(td)) {
        return
      }
      this.loading = true
      getCadreTasks(td).then(res => {
        let r = res as any
        if(r.code === 20000){
          this.cadres = res.data
          this.loading = false
        }
        else {
          ElMessage.error(r.message)
        }
      })
    },
    // 添加备注
    addNote(row: any) {
      this.currentRow = row
      this.dlgNote = true
    },
    // 计算行编辑状态
    getEditState(row: any) {
      return row?.edit || false
    },
    editRow(row: any) {
      row.edit = !this.getEditState(row)
    },
    // 提交保存
    submit() {
      ElMessageBox.confirm('你正在上传干部绩效工资, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.loading = true
        saveCadreMerits(this.cadres).then(res => {
          ElMessage.success('保存成功')
          this.loading = false
        })
      }).catch(() => {
        ElMessage.info('已取消上传')
      })
    }
  }
})
</script>

<style>

</style>